<template>
	<div class="big_box">
		<div class="topic_con_scroll">
				<div v-for="(v,n) in titArray" style="margin-bottom: 0.43rem;">
					<div class="question_box" >
						<div class="question_item_top">
							<div class="question_index">Q1</div>
							<div class="question_img">
								<img src="../../assets/image/lesson/answerT.png" alt="">
							</div>
							<div class="question_content">
								<div class="question_content_top">
									<div
									class="question_content_txt1"
									:class="{txt_change1:v.img_change}"
									>切</div>
									<div 
									class="question_content_txt2"
									@click="changeimg(v)">
									<span v-for="v1 in testarray" v-if="v1.checkflag"  :class="{txt_change2:v.img_change}">{{v1.message}}</span>
										<img
										:class="{special_change:v.img_change}"
										 src="../../assets/image/lesson/change.png" alt="">
									</div>
								</div>
							</div>
						</div>
						<div class="question_item_btm">
							<div class="question_item_btm_item" 
							:class="{mar_r0:(index+1)%4==0,
							question_item_btm_item_special:item.checkflag
							}"
							@click="chose_answer(item)"
							v-for="(item,index) in testarray">
								<img 
								:class="{arr_img_disappear:!item.checkflag}"
								src="../../assets/image/lesson/target.png" alt="" class="arr_img">
								<div class="question_item_content">
									<span>{{answerArray[index]}}.</span>
									<span>{{item.message}}</span>
								</div>
							</div>
						</div>
				</div>
			</div>
			<div class="next_group" @click="nextGroup">
				<img src="../../assets/image/lesson/nextGroup.png" alt="">
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		name: "mysummary",
		data() {
			return {
				answerArray: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
				currItemel: -1,
				choseitemFlag: -1,
				allquestion: [],
				summarizeIndex: 0,
				titArray: [{
						img_change: false,
					},
					{
						img_change: false,
					},
					{
						img_change: false,
					},
					{
						img_change: false,
					}
				],
				testarray: [{
						checkflag: false,
						message: `开`
					},
					{
						checkflag: false,
						message: `美`
					},
					{
						checkflag: false,
						message: `哇`
					},
					{
						checkflag: false,
						message: `嘻`
					},
					{
						checkflag: false,
						message: `嘻`
					},
					{
						checkflag: false,
						message: `嘻`
					},
					{
						checkflag: false,
						message: `嘻`
					},
					{
						checkflag: false,
						message: `嘻`
					},
				]
			}
		},
		props: ['questionList', ],
		mounted() {
			console.log(this.$store.state.summarizeIndex)
			this.summarizeIndex = this.$store.state.summarizeIndex
			this.$emit('setSummarizeIndex', this.summarizeIndex)
			this.renderpage()
			console.log(this)
			// this.$emit("showloading",{
			// 	methods:'push',
			// 	path:'/score'
			// })

			// this.clearVuex()
		},

		watch: {

		},
		methods: {
			chose_answer(v) {
				for (var i = 0; i < this.testarray.length; i++) {
					this.testarray[i].checkflag = false
				}
				v.checkflag = true
			},
			changeimg(v){
				v.img_change=!v.img_change
			},
			renderpage() {
				this.$request.get("getWordLogiclist", {}).then((res) => {
					// console.log(res.data.data)
					for (var i = 0; i < res.data.data.length; i++) {
						for (var k = 0; k < res.data.data[i]['stem'].length; k++) {
							for (var j = 0; j < res.data.data[i]['stem'][k].question.length; j++) {
								for (var o = 0; o < res.data.data[i]['stem'][k].question[j].answer.length; o++) {
									//多个未答题型 怎么办
									// console.log(this.$store.state.summarizequestionArray)
									res.data.data[i]['stem'][k].question[j].answer[o].isChose = false
									if (this.$store.state.summarizequestionArray) {
										for (var q = 0; q < this.$store.state.summarizequestionArray.length; q++) {
											for (var w = 0; w < this.$store.state.summarizequestionArray[q]['stem']
												.length; w++) {
												for (var e = 0; e < this.$store.state.summarizequestionArray[q][
														'stem'
													][w].question.length; e++) {
													for (var r = 0; r < this.$store.state.summarizequestionArray[q]
														['stem'][w].question[e].answer.length; r++) {
														if (res.data.data[i]['stem'][k].question[j].answer[o].id ==
															this.$store.state.summarizequestionArray[q]['stem'][w]
															.question[e].answer[r].id) {
															res.data.data[i]['stem'][k].question[j].answer[o]
																.isChose = this.$store.state
																.summarizequestionArray[q]['stem'][w].question[e]
																.answer[r].isChose
														}
													}
												}
											}
										}
									}
								}
							}
						}
					}
					this.allquestion = res.data.data
					console.log(this.allquestion)
					//用nextgroup来驱动倒计时 应该是0
					this.$emit('countdown', this.allquestion[this.summarizeIndex].current_time, this.allquestion[
						this.summarizeIndex].end_time)
				}).catch((err) => {
					// this.$message({
					//           message: '警告哦，这是一条警告消息',
					//           type: 'warning'
					//         });
				})
			},
			saveQuestion() {
				this.$store.commit('setsummarizequestionArray', this.allquestion)
			},
			nextGroup(flag) {
				if (this.summarizeIndex == this.allquestion.length - 1) {
					//提交
					this.submit()
					return
				}
				//必须用index来驱动
				// if(!flag){
				this.summarizeIndex++
				// }
				this.$emit('setSummarizeIndex', this.summarizeIndex)
				this.$store.commit('setSummarize', this.summarizeIndex)
				this.$emit('countdown', this.allquestion[this.summarizeIndex].current_time, this.allquestion[this
					.summarizeIndex].end_time)
				console.log(this.summarizeIndex)
				console.log(this.$store.state.summarizeIndex)
			},
			submit() {
				console.log('submit')
				var arr = []
				this.allquestion
				for (var i = 0; i < this.allquestion.length; i++) {
					for (var k = 0; k < this.allquestion[i]['stem'].length; k++) {
						for (var j = 0; j < this.allquestion[i]['stem'][k].question.length; j++) {
							for (var o = 0; o < this.allquestion[i]['stem'][k].question[j].answer.length; o++) {
								if (this.allquestion[i]['stem'][k].question[j].answer[o].isChose) {
									arr.push({
										test_id: this.allquestion[i].test_id,
										id: this.allquestion[i]['stem'][k].question[j].id,
										answer: this.allquestion[i]['stem'][k].question[j].answer[o].id
									})
								}
							}
						}
					}
				}
				console.log(arr)
				// return
				this.$request.post("saveWordLogicTest", {
					question: JSON.stringify(arr),
					test_id: this.allquestion[0].test_id
				}).then((res) => {
					console.log(res.data.code)
					if (res.data.code == 200) {
						this.clearVuex()
						this.$emit('Jump', '/score', {
							test_id: this.allquestion[0].test_id,
							test_type: 'wordlogic'
						})

					}
				})
			},

			//结束之后清除
			clearVuex() {
				this.$store.commit('setSummarize', 0)
				this.$store.commit('setsummarizequestionArray', null)
			},
			changeItemel(array, v) {
				//点一次存一次

				for (var i = 0; i < array.length; i++) {
					array[i].isChose = false
				}
				v.isChose = true

				this.saveQuestion()
			},
			choseitem(array, v) {
				//点一次存一次
				for (var i = 0; i < array.length; i++) {
					array[i].isChose = false
				}
				v.isChose = true

				this.saveQuestion()
			},
			gome() {

			},
			// 前往首页
			goHome() {


			}
		}
	}
</script>
<style lang="less" scoped>
	.big_box {
		padding: 1.17rem 0.63rem 0.43rem 0.97rem;
		box-sizing: border-box;
		height: 100%;
		width: 100%;
	}

	.topic_con_scroll {
		overflow-y: scroll;
		height: 100%;

		//火狐浏览器隐藏滚动条
		& {
			scrollbar-color: #9eb0e6 #f7f7f9;
			scrollbar-width: thin;
			scrollbar-track-color: transparent;
			-ms-scrollbar-track-color: transparent;
		}

		/* 设置滚动条的样式 谷歌  */
		&::-webkit-scrollbar {
			width: 12px;
		}

		/* 滚动槽 */
		&::-webkit-scrollbar-track {
			-webkit-box-shadow: inset006pxrgba(223, 224, 229);
			border-radius: 10px;
		}

		/* 滚动条滑块 */
		&::-webkit-scrollbar-thumb {
			border-radius: 10px;
			background: rgba(158, 176, 230);
			-webkit-box-shadow: inset006pxrgba(158, 176, 230);
		}

		&::-webkit-scrollbar-thumb:window-inactive {
			background: rgba(229, 226, 217);
		}

		.next_group {
			float: right;
			width: 1.68rem;
			height: 0.66rem;
			cursor: pointer;
			position: relative;
			z-index: 1;

			&>img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.question_box {
		width: 100%;

		&>.question_item_top {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 0.21rem;

			.question_index {
				color: #2175F4;
			}

			.question_img {
				width: 0.75rem;
				height: 0.75rem;
				margin: 0 0.24rem 0 0.2rem;

				&>img {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.question_content {
				width: 8.63rem;

				.question_content_top {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					&>.question_content_txt1 {
						padding: 0.07rem 0;
						font-size: 0.21rem;
						color: #373737;
						margin-right: 0.16rem;
						transition: all 1s;
					}
					.txt_change1 {
						transform: translateX(0.9rem) !important;
					}
					&>.question_content_txt2 {
						padding: 0.07rem 0;
						box-sizing: border-box;
						border-bottom: 0.01rem solid #636363;
						text-align: center;
						height: 0.35rem;
						display: flex;
						color: #373737;
						align-items: center;
						justify-content: center;
						width: 1.56rem;
						position: relative;
						&>span{
							transition: all 1s;
						}
						&>img {
							position: absolute;
							cursor: pointer;
							width: 0.2rem;
							height: 0.2rem;
							right: 0;
							top: 50%;
							margin-top: -0.1rem;
							transition: all 1s;
							transform: rotateY(0deg);
						}

						&>.special_change {
							transform: rotateY(180deg);
						}



						.txt_change2 {
							transform: translateX(-0.9rem) !important;
						}
					}
				}
			}
		}

		.question_item_btm {
			overflow: hidden;
			padding-left: 1.45rem;
			margin-top: 0.15rem;
			.question_item_btm_item {
				width: 1.8rem;
				height: 0.85rem;
				border-radius: 0.43rem;
				border: 0.04rem solid #E8E8E8;
				box-sizing: border-box;
				padding: 0 0.48rem 0 0.31rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 0.16rem;
				float: left;
				margin-right: 0.47rem;
				cursor: pointer;
				.arr_img{
					width: 0.35rem;
					height: 0.38rem;
				}
				.arr_img_disappear{
					opacity: 0 ;
				}
				.question_item_content{
					color: #333333;
					font-size: 0.18rem;
					&>span:nth-child(1){
						// margin-right: 0.12rem;
					}
				}
				
			}
			.question_item_btm_item_special{
				background: #D2DFF6;
				border: 0.04rem solid #D2DFF6;
			}
		}
	}
</style>
